<template>
  <el-row>
    <el-col :span="6" style="padding:5px 20px;" class="filter-col">
      <el-row>
        <el-col :span="12">价格</el-col>
        <el-col :span="12" style="text-align:right">0-{{data.price_it}}</el-col>
      </el-row>
      <el-slider v-model="data.price_it" :max="4000" @input="handleChange"></el-slider>
    </el-col>
    <el-col :span="18">
      <el-row>
        <el-col :span="6" style="padding:5px 20px;" class="filter-col">
          <el-row>
            <el-col>住宿等级</el-col>
          </el-row>
          <el-dropdown @command="handleLevel" placement="bottom">
            <span class="el-dropdown-link">
              {{level}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="(lv,i) in options.levels" :key="i" :command="lv.id">
                <i class="iconfont icon-dui1" v-if="data.hotellevel_in[lv.id]==lv.id"></i>
                <i class="iconfont icon-yuanquan" v-else></i>
                {{lv.name}}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
        <el-col :span="6" style="padding:5px 20px;" class="filter-col">
          <el-row>
            <el-col>住宿类型</el-col>
          </el-row>
          <el-dropdown placement="bottom" @command="handleType">
            <span class="el-dropdown-link">
              {{type}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="(val,i) in options.types" :key="i" :command="val.id">
                <i class="iconfont icon-dui1" v-if="data.hoteltype_in[val.id]==val.id"></i>
                <i class="iconfont icon-yuanquan" v-else></i>
                {{val.name}}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
        <el-col :span="6" style="padding:5px 20px;" class="filter-col">
          <el-row>
            <el-col>酒店设施</el-col>
          </el-row>
          <el-dropdown placement="bottom" @command="handleAsset">
            <span class="el-dropdown-link">
              {{asset}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="(item,i) in options.assets" :key="i" :command="item.id">
                <i class="iconfont icon-dui1" v-if="data.hotelasset_in[item.id]==item.id"></i>
                <i class="iconfont icon-yuanquan" v-else></i>
                {{item.name}}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
        <el-col :span="6" style="padding:5px 20px;" class="filter-col">
          <el-row>
            <el-col>酒店品牌</el-col>
          </el-row>
          <el-dropdown placement="bottom" @command="handleBrand">
            <span class="el-dropdown-link">
              {{brand}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown" style="height:200px;overflow-y:scroll;">
              <el-dropdown-item v-for="(item,i) in options.brands" :key="i" :command="item.id">
                <i class="iconfont icon-dui1" v-if="data.hotelbrand_in[item.id]==item.id"></i>
                <i class="iconfont icon-yuanquan" v-else></i>
                {{item.name}}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      options: {},
      data: {
        price_it: 4000,
        hotellevel_in: [],
        hoteltype_in: [],
        hotelasset_in: [],
        hotelbrand_in: []
      },
      level: "不限",
      asset: "不限",
      type: "不限",
      brand: "不限"
    };
  },
  methods: {
    //滑块变化
    handleChange(num) {
      // console.log(num);
      this.data.price_it = num;
      this.$emit("on-select", this.data);
    },
    callbackNewArr(arr, id) {
      let newArr = [...arr];
      if (newArr.indexOf(id) > -1) {
        newArr[id] = undefined;
      } else {
        newArr[id] = id;
      }
      return newArr;
    },
    //筛选假值
    filterFalseVal(arr) {
      let newArr = [];
      newArr = arr.filter(item => {
        if (item) {
          return item;
        }
      });
      return newArr;
    },
    //下拉菜单选择时
    handleLevel(id) {
      this.data.hotellevel_in = this.callbackNewArr(
        this.data.hotellevel_in,
        id
      );
      // this.$forceUpdate()
      // console.log(this.data.hotellevel_in);
      let arr = this.filterFalseVal(this.data.hotellevel_in);
      if (arr.length == 0) {
        this.level = "不限";
      } else if (arr.length == 1) {
        this.options.levels.filter(item => {
          if (item.id == arr[0]) {
            this.level = item.name;
          }
        });
      } else if (arr.length > 1) {
        this.level = "选择了" + arr.length + "项";
      }
      this.$emit("on-select", this.data);
    },
    handleType(id) {
      this.data.hoteltype_in = this.callbackNewArr(this.data.hoteltype_in, id);
      let arr = this.filterFalseVal(this.data.hoteltype_in);
      if (arr.length == 0) {
        this.type = "不限";
      } else if (arr.length == 1) {
        this.options.types.filter(item => {
          if (item.id == arr[0]) {
            this.type = item.name;
          }
        });
      } else if (arr.length > 1) {
        this.type = "选择了" + arr.length + "项";
      }
      this.$emit("on-select", this.data);
    },
    handleAsset(id) {
      this.data.hotelasset_in = this.callbackNewArr(
        this.data.hotelasset_in,
        id
      );
      let arr = this.filterFalseVal(this.data.hotelasset_in);
      if (arr.length == 0) {
        this.asset = "不限";
      } else if (arr.length == 1) {
        this.options.assets.filter(item => {
          if (item.id == arr[0]) {
            this.asset = item.name;
          }
        });
      } else if (arr.length > 1) {
        this.asset = "选择了" + arr.length + "项";
      }
      this.$emit("on-select", this.data);
    },
    handleBrand(id) {
      this.data.hotelbrand_in = this.callbackNewArr(
        this.data.hotelbrand_in,
        id
      );
      let arr = this.filterFalseVal(this.data.hotelbrand_in);
      if (arr.length == 0) {
        this.brand = "不限";
      } else if (arr.length == 1) {
        this.options.brands.filter(item => {
          if (item.id == arr[0]) {
            this.brand = item.name;
          }
        });
      } else if (arr.length > 1) {
        this.brand = "选择了" + arr.length + "项";
      }
      this.$emit("on-select", this.data);
    },
    //下拉数据
    getHotelOptions() {
      this.$axios.get("hotels/options").then(res => {
        // console.log(res);
        const { data } = res.data;
        this.options = data;
      });
    }
  },
  created() {
    this.getHotelOptions();
  }
};
</script>

<style lang="less" scoped>
.filter-col {
  font-size: 14px;
  &:nth-of-type(-n + 3) {
    border-right: 1px solid #ddd;
  }
  .el-dropdown {
    height: 38px;
    line-height: 38px;
    width: 100%;
    .el-dropdown-link {
      display: flex;
      flex: 1;
      width: 100%;
      cursor: pointer;
      align-items: center;
      justify-content: space-between;
    }
  }
}
.el-dropdown-menu {
  width: 170px;
}
.el-slider__button-wrapper {
  z-index: 997;
}
</style>
